<template>
  <!--
   :tree-config="{
        children: 'children',
        expandAll: false,
        trigger:'cell',
        lazy: true,
        load: loadTree,
        hasChildren: 'hasChildNodes'
      }"
  -->
  <div>
    <u-table
      ref="plTreeTable"
      v-loading="loading"
      element-loading-background="rgba(0, 0, 0, 0.2)"
      element-loading-text="数据加载中..."
      :height="height"
      :data-changes-scroll-top="false"
      :tree-config="{
        children: 'children',
        expandAll: false,
        trigger:'cell',
        lazy: true,
        load: loadTree,
        iconLoaded: 'el-icon-view',
        hasChildren: 'hasChildNodes'
      }"
      class="tree-table"
      use-virtual
      row-id="uuid"
      border
      stripe
      @toggle-tree-expand="toggleTreeExpand"
    >
      <u-table-column
        key="rowLabel"
        :tree-node="true"
        :width="200"
        header-align="center"
        prop="rowLabel"
        label="行标签"
      />
      <virtual-multi-level-colums
        v-for="item in columns"
        :key="'virtual-' + item.key"
        :col="item"
      />
      <template slot="empty">
        <div class="empty-text">{{ emptyText }}</div>
      </template>
    </u-table>
  </div>
</template>

<script>
import VirtualMultiLevelColums from '@/components/business/VirtualMultiLevelColums';

export default {
  components: {
    VirtualMultiLevelColums
  },
  props: {
    columns: {
      type: Array,
      required: true,
      default: () => []
    },
    tableData: {
      type: Array,
      required: true,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    loadTree: {
      type: Function,
      default: function(tree, resolve) {
        console.log(tree, resolve);
      }
    },
    emptyText: {
      type: String,
      default: '暂无数据.'
    }
  },
  data() {
    return {
      height: 680
    };
  },
  watch: {
    tableData: {
      deep: true,
      handler(data) {
        this.$refs.plTreeTable.reloadData([...data]);
      }
    }
  },
  methods: {
    // 收起展开时触发
    toggleTreeExpand (row, treeExpanded, event) {
      console.log(row, treeExpanded, event);
    }
  }
};
</script>

<style>
.tree-table {
  width: 100%;
  cursor: pointer;
}
.plTableBox .el-table .umy-table-beyond {
  white-space: normal !important;
  position: relative;
}
.pl-tree-cell {
  white-space: normal !important;
}
.empty-text {
  height: 500px;
  text-align: left;
  line-height: 490px;
  font-size: 16px;
  margin-left: -85px;
}
</style>
